<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'

// useVueFlow provides access to the event handlers
const {
  onNodeDragStart,
  onNodeDrag,
  onNodeDragStop,
  onNodeClick,
  onNodeDoubleClick,
  onNodeContextMenu,
  onNodeMouseEnter,
  onNodeMouseLeave,
  onNodeMouseMove
} = useVueFlow()

const nodes = ref([
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 50, y: 50 },
  },
])

// bind listeners to the event handlers
onNodeDragStart((event) => {
  console.log('Node drag started', event)
})

onNodeDrag((event) => {
  console.log('Node dragged', event)
})

onNodeDragStop((event) => {
  console.log('Node drag stopped', event)
})
onNodeClick((event)=>{
  console.log('onNodeClick', event)
})
onNodeDoubleClick((event)=>{
  console.log('onNodeDoubleClick', event)
})
onNodeContextMenu((event)=>{
  console.log('onNodeContextMenu', event)
})
onNodeMouseEnter((event)=>{
  console.log('onNodeMouseEnter', event)
})
onNodeMouseLeave((event)=>{
  console.log('onNodeMouseLeave', event)
})
onNodeMouseMove((event)=>{
  // console.log('onNodeMouseMove', event) // 执行太多了
})

// ... and so on
</script>

<template>
  <div style="height: calc(100vh - 60px);">
    <VueFlow :nodes="nodes" />
  </div>

</template>
